<template>
    <div class="">
        <el-upload
            :class="ishide ? 'hide' : ''"
            :action="action"
            :headers="{ token: $store.getters.token, version: version }"
            list-type="picture-card"
            :limit="1"
            :on-remove="handleRemove"
            :on-success="handleSuccess"
            :on-exceed="handleExceed"
            :on-error="handleError"
        >
            <i class="el-icon-plus"></i>
        </el-upload>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import config from '@/config'
@Component({
    components: {}
})
export default class LsUpload extends Vue {
    // @Prop() value ? : string // imgUrl

    action = `${config.baseURL}/supplierapi/upload/wechatMaterial`
    version = config.version
    ishide = false

    handleRemove(file: any, fileList: any) {
        this.ishide = false
    }
    handleSuccess(response: any, file: any, fileList: any[]) {
        this.$emit('setImage', response.data.media_id)
        this.ishide = true
    }
    handleError(err: any, file: any) {
        this.$message.error(`${file.name}文件上传失败`)
    }
    handleExceed() {
        this.$message.error('超出上传上限，请重新上传')
    }
}
</script>

<style lang="scss" scoped>
/deep/ .el-upload--picture-card {
    width: 98px;
    height: 98px;
}

/deep/ .el-upload {
    width: 98px;
    height: 98px;
    line-height: 108px;
}

/deep/ .el-upload-list--picture-card .el-upload-list__item {
    width: 98px;
    height: 98px;
    line-height: 108px;
}

/deep/ .el-upload-list--picture-card .el-upload-list__item-thumbnail {
    width: 98px;
    height: 98px;
    line-height: 108px;
}

/deep/ .avatar {
    width: 98px;
    height: 98px;
}
/deep/ .el-upload-list__item-status-label {
    visibility: hidden;
}
/deep/ .hide .el-upload--picture-card {
    display: none;
}
</style>
